<template>
  <div class="app-container">
    <!--工具栏-->
    <el-steps :active="0" simple> </el-steps>
    <el-card v-if="active == 0">
      <div class="head-container">
        <!-- 搜索 -->
        <el-input
          v-model="query.value"
          clearable
          placeholder="输入搜索内容"
          style="width: 200px"
          class="filter-item"
          @keyup.enter.native="toQuery"
        />
        <el-select
          v-model="query.type"
          clearable
          placeholder="类型"
          class="filter-item"
          style="width: 130px"
        >
          <el-option
            v-for="item in queryTypeOptions"
            :key="item.key"
            :label="item.display_name"
            :value="item.key"
          />
        </el-select>
        <el-button
          class="filter-item"
          size="mini"
          type="success"
          icon="el-icon-search"
          @click="toQuery"
          >搜索</el-button
        >
        <!-- 新增 -->
        <div style="display: inline-block; margin: 0px 2px">
          <el-button
            type="danger"
            class="filter-item"
            size="mini"
            icon="el-icon-refresh"
            @click="toQuery"
            >刷新</el-button
          >
        </div>
      </div>
      <el-table
        v-loading="loading"
        :data="data"
        size="small"
        style="width: 100%"
        @selection-change="handleSelectionChanges"
        :row-key="getRowKey"
      >
        <el-table-column
          align="center"
          type="selection"
          width="95"
          :reserve-selection="true"
        >
        </el-table-column>
        <el-table-column ref="table" prop="image" label="商品图片">
          <template slot-scope="scope">
            <a :href="scope.row.image" style="color: #42b983" target="_blank">
              <img :src="scope.row.image" alt="点击打开" class="el-avatar" />
            </a>
          </template>
        </el-table-column>
        <el-table-column prop="storeName" label="商品名称" />
        <el-table-column prop="price" label="商品价格" />
        <el-table-column prop="stock" label="库存" />
        <el-table-column prop="num" label="数量">
          <template slot-scope="scope">
            <el-input-number
              :min="1"
              v-model="scope.row.num"
              :max="scope.row.stock"
              label="购买数量"
            ></el-input-number>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <el-pagination
        :total="total"
        :current-page="page + 1"
        style="margin-top: 8px"
        layout="total, prev, pager, next, sizes"
        @size-change="sizeChange"
        @current-change="pageChange"
      />
    </el-card>
    <el-card v-show="active == 1">
      <Detail ref="hh" :is-add="isAdd" @submitFail="fail" />
    </el-card>
    <el-button style="margin-top: 12px" @click="handleProduct"
      >选择商品</el-button
    >
    <el-button style="margin-top: 12px" @click="handleOrder">订单</el-button>
  </div>
</template>

<script>
import initData from "@/mixins/crud";
import EmitSale from "./emitSale";
import Detail from "./detail";
export default {
  components: { Detail, EmitSale },
  mixins: [initData],
  data() {
    return {
      isAdd: false,
      active: 0,
      retailId: -1,
      storeName: null,
      dropDownValue: "",
      optionsMetaShow: [],
      multipleTable: [],
      delLoading: false,
      visible: false,
      queryTypeOptions: [{ key: "storeName", display_name: "商品名称" }],
      isAttr: false,
      cateId: null,
    };
  },
  created() {
    this.$nextTick(() => {
      this.retailId = JSON.parse(localStorage.getItem("SET_USER")).retail;
      this.handleInit();
    });
  },

  methods: {
    getRowKey(row) {
      return row.id;
    },
    handleSelectionChanges(val) {
      this.multipleTable = val;
    },
    handleInit() {
      this.init().then(() => {
        this.data.forEach(function (item, index) {
          item.num = 1;
        });
      });
    },
    fail(val) {
      this.active = val;
      this.handleInit();
    },
    handleOrder() {
      //计算商品的总价
      if (this.multipleTable.length == 0) {
        this.$notify({
          title: "请先选择商品",
          type: "warning",
          duration: 2500,
        });
        return;
      }
      //遍历商品计算金额
      let totalPrice = 0.0;
      let payPrice = 0.0;
      let totalNum = 0;
      const products = this.multipleTable;

      products.forEach((item) => {
        totalNum += item.num;
        totalPrice += item.num * item.price;
        payPrice += item.num * item.price;
      });
      const _this = this.$refs.hh;
      _this.order = {
        statusName: "待支付",
        _status: 1,
        status: 4,
        storeId: this.retailId,
        shippingType: 1,
        orderId: null, //虚拟单号
        payType: "1",
        isBatch: 1,
        shippingType: 1, //快递类型 可选择
        deliverySn: null, //快递名称
        realName: null,
        userPhone: null,
        userAddress: null,
        mark: "暂无",
        remark: "暂无",
        products: products,
        payPrice: payPrice,
        totalPrice: totalPrice,
        payPostage: 0,
        couponPrice: 0,
        totalNum: totalNum,
        deductionPrice: 0.0, //积分折扣
      };
      _this.userDTO = {
        nickname: null,
      };
      this.active = 1;
      this.isAdd = true;
    },
    handleProduct() {
      this.active = 0;
    },
    dataFilter(val) {
      this.value = val;
      if (val) {
        this.optionsMetaShow = this.cateList.filter((item) => {
          if (
            !!~item.label.indexOf(val) ||
            !!~item.label.toUpperCase().indexOf(val.toUpperCase())
          ) {
            return true;
          }
        });
      } else {
        this.optionsMetaShow = this.cateList;
      }
    },
    beforeInit() {
      this.url = "retail/stock/queryGoods";
      const sort = "id,desc";
      this.params = {
        page: this.page,
        size: this.size,
        sort: sort,
        storeName: this.storeName,
        id: this.retailId,
      };
      const query = this.query;
      const type = query.type;
      const value = query.value;
      if (type && value) {
        this.params[type] = value;
      }
      return true;
    },
    //选择框
    // checkboxT(row, rowIndex) {
    //   return row.id !== 1;
    // },
  },
};
</script>

<style scoped lang="scss">
.header {
  margin-bottom: 20px;
}
.imgs {
  width: 100px;
}
.logistics {
  align-items: center;
  padding: 10px 0px;
  .logistics_img {
    width: 45px;
    height: 45px;
    margin-right: 12px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .logistics_cent {
    span {
      display: block;
      font-size: 12px;
    }
  }
}

.trees-coadd {
  width: 100%;
  height: 400px;
  border-radius: 4px;
  overflow: hidden;
  .scollhide {
    width: 100%;
    height: 100%;
    overflow: auto;
    margin-left: 18px;
    padding: 10px 0 10px 0;
    box-sizing: border-box;
    .content {
      font-size: 12px;
    }

    .time {
      font-size: 12px;
      color: #2d8cf0;
    }
  }
}

.title {
  margin-bottom: 10px;
  color: #17233d;
  font-weight: 500;
  font-size: 14px;
}

.description {
  &-term {
    display: inline-block;
    padding-bottom: 5px;
    line-height: 20px;
    width: 50%;
    font-size: 12px;
  }
  // /deep/ .el-divider--horizontal {
  //   margin: 12px 0 !important;
  // }
  >>> .el-divider--horizontal {
    margin: 12px 0 !important;
  }
}
>>> .tb .el-talbe_header .el-table-column--selection .cell .el-checkbox {
  display: none !important;
}
.box-card {
  height: 50px;
}
</style>
